<template>
    <div>
        <p id="p1" @click="count++">count:{{ count }}</p>
    </div>
</template>

<script>
// 在watch 侦听器中获取最新的dom 的四种方式?


// 引入nextTick
import { nextTick } from 'vue'
// console.log('nextTick', nextTick); 
export default {
    data() {
        return {
            count: 100
        }
    },
    watch: {
        // 第一种实现获取最新dom 的方案:
        // count: {
        //     handler(newvalue) {
        //         console.log(newvalue);
        //         // document.querySelector('#p1') 获取的节点是最新的节点呢, 因为chromeV8引擎的原因
        //         //在控制台输出dom标签的时候,有一定的滞后性,所以哪的就是最新的
        //         // console.log(document.querySelector('#p1'));
        //         console.log(document.querySelector('#p1').innerHTML);
        //     },
        //     flush: 'post' 
        // },
        //第二种方案: 使用 定时器,放在异步任务队列中执行
        // count(newvalue) {
        //     // setTimeout 异步任务, 异步任务后执行
        //     setTimeout(() => {
        //         console.log(document.querySelector('#p1').innerHTML);
        //     }, 0)
        // },
        // 第三种方案: 使用nextTick,该函数形参是一个回调函数, 回调函数的触发时间是
        // 等 dom 更新完触发
        // nextTick 方法底层封装 是判断当前浏览器是否支持promise. 如果支持, 就将fn放在promise.then 中执行
        // 如果不支持的话, 就将fn 这个形参回调函数放在 setTimeout中执行    
        // count(newvalue) {
        //     // setTimeout 异步任务, 异步任务后执行
        //     nextTick(() => {
        //         console.log(document.querySelector('#p1').innerHTML);
        //     })
        // },
        // 第四种语法: 
        async count() {
            // const p = nextTick(() => {
            //     // console.log(document.querySelector('#p1').innerHTML);
            // })

            // console.log('p', p); //promise
            await nextTick()
            console.log(document.querySelector('#p1').innerHTML);
        }
    }
}
</script>
<style scoped></style>